<template>
    <div  class="q-pa-sm q-gutter-y-sm">
      <!--        Loading-->
      <q-linear-progress stripe indeterminate style="height: 1px" v-show="loading"/>
      <!--        toolbar-->
      <q-toolbar class="text-primary" style="max-height: 10vh">
        <q-btn flat round dense icon="home" @click="onClickLeft"/>
        <q-toolbar-title>
          {{bookName}}
        </q-toolbar-title>
<!--          <q-btn flat round dense icon="sort_variant" @click="reverseShow" />-->
          <q-btn flat round dense icon="menu" @click="actionSelect" label="操作"/>
      </q-toolbar>
      <!--        fastLink-->
      <q-chip color="deep-orange" clickable text-color="white" icon="directions"  @click="tocontentByNotice" v-show="noticeShow">
        {{'继续阅读《'+noticeBean.bookName+'》'+noticeBean.title}}
      </q-chip>
<!--      list loading-->
      <q-item v-show="!bookcontentlist" v-for="index in 10" :key="index">
        <q-item-section avatar>
          <q-skeleton type="QBadge" />
        </q-item-section>

        <q-item-section>
          <q-item-label>
            <q-skeleton type="text" />
          </q-item-label>
          <q-item-label caption>
            <q-skeleton type="text" width="65%" />
          </q-item-label>
        </q-item-section>
      </q-item>
<!--      list-->
      <q-virtual-scroll v-show="bookcontentlist" :items="bookcontentlist"
           separator  style="max-height: 90vh">
        <template v-slot="{ item,index }">
          <q-item :key="index" v-ripple @click.native="toBookContent(item)">
            <q-item-section >
              <q-item-label >{{item.title}}<q-item-label  style="width: 18%;float: left" caption>{{item.sortIndex}}</q-item-label></q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-virtual-scroll>
    </div>
</template>
<script>
import axios from 'axios'
import { nlocalstorage } from '../util/localstorage.js'
import { pageUrl } from '../util/pageUrl.js'
let deleteContentCount = 0
export default {
  name: 'bookcontentlist',
  data () {
    return {
      loading: true,
      bookcontentlist: null,
      bookName: '',
      bookId: '',
      actionShow: false, // 弹出菜单
      actions: [
        { label: '更新', id: 'update' },
        { label: '清除章节', id: 'deleteContent' },
        { label: '章节颠倒', id: 'contentReversal' },
        { label: '收藏', id: 'updateCollection' }
      ],
      sortZx: true, // 正序
      noticeShow: false,
      noticeBean: {}
    }
  },
  mounted () {
    const _this = this
    _this.bookId = _this.$route.params.id
    _this.bookName = _this.$route.params.name

    _this.queryLastRead()// 查询最近阅读

    // 查询列表
    nlocalstorage.get('contentlist', (cookieI) => {
      if (cookieI && cookieI.length > 0) {
        if (cookieI[0].bookId != _this.bookId) {
          _this.queryList()
        } else {
          _this.bookcontentlist = cookieI
          _this.loading = false
        }
      } else {
        _this.queryList()
      }
    })
  },
  methods: {
    reverseShow () {
      this.sortZx = !this.sortZx
    },
    queryList () {
      const _this = this
      _this.loading = true
      axios({
        url: '/novelBook/contentList/' + _this.bookId
      }).then(res => {
        if (res.data.state === 'success') {
          // 记录目录数据
          nlocalstorage.set('contentlist', res.data.obj, 120)
          _this.bookcontentlist = res.data.obj
          // _this.showContentList()
        }
      }).finally(() => {
        _this.loading = false
      })
    },
    updateNovelBookFromZhwenpg () {
      const _this = this
      const id = _this.bookId
      _this.loading = true
      nlocalstorage.remove('contentlist')
      axios({
        url: 'reptile/updateNovelBookFromZhwenpg?bookId=' + id
      }).then(res => {
        // eslint-disable-next-line no-console
        console.log(res)
        if (res.data === -1) {
          _this.$q.notify('服务异常')
        } else if (res.data === -2) {
          _this.$q.notify('1小时内只能更新一次,请稍后重试')
        } else if (res.data === 0) {
          _this.$q.notify('无更新')
        } else {
          _this.$q.notify('正在更新,条数:' + res.data)
        }
      }).catch(() => {
        _this.$q.notify('服务异常')
      }).finally(() => {
        _this.loading = false
      })
    },
    onClickLeft () {
      this.$router.push('/')
    },
    /* 颠倒顺序 */
    contentReversal () {
      const _this = this
      const id = _this.bookId
      _this.loading = true
      axios({
        url: 'novelBook/contentReversal/' + id
      }).then(res => {
        if (res.data.state === 'success') {
          _this.$q.notify('章节顺序颠倒')
          _this.loading = true
          _this.queryList()
        }
      }).catch(() => {
        _this.$q.notify('服务异常')
      }).finally(() => {
        _this.loading = false
      })
    },
    actionSelect (item) {
      const _this = this
      this.$q.bottomSheet({
        actions: _this.actions
      }).onOk(item => {
        if (item.id === 'update') {
          _this.updateNovelBookFromZhwenpg()
        } else if (item.id === 'contentReversal') {
          _this.contentReversal()
        } else if (item.id === 'updateCollection') {
          _this.updateCollection()
        } else if (item.id === 'deleteContent' && ++deleteContentCount > 10) {
          _this.deleteContent()
          deleteContentCount = 0
        }
      }).onCancel(() => {
        // console.log('Dismissed')
      }).onDismiss(() => {
        // console.log('I am triggered on both OK and Cancel')
      })
    },
    updateCollection () {
      const _this = this
      let url = pageUrl.addCollection
      let sc = 1
      nlocalstorage.get('book', (book) => {
        console.log(book)
        if (book && book.id == _this.bookId) {
          if (book.isUserCollection && book.isUserCollection === 1) {
            sc = 0
            url = pageUrl.deleteCollection
          }
        }
        _this.loading = true
        axios({
          url: url,
          params: {
            bookId: _this.bookId,
            type: 1
          }
        }).then(res => {
          if (res.data.state === 'success') {
            if (sc === 1) {
              _this.$q.notify('收藏成功')
            } else {
              _this.$q.notify('取消收藏成功')
            }
          } else {
            _this.$q.notify(res.data.message)
          }
        }).catch(() => {
          _this.$q.notify('服务异常')
        }).finally(() => {
          _this.loading = false
        })
      })
    },
    deleteContent () {
      const _this = this
      _this.loading = true
      axios({
        url: pageUrl.deleteContentsByBookId,
        params: {
          bookId: _this.bookId
        }
      }).then(res => {
        if (res.data.state === 'success') {
          nlocalstorage.remove('contentlist')
          _this.$router.go(-1)
        }
      }).catch(() => {
        _this.$q.notify('服务异常')
      }).finally(() => {
        _this.loading = false
      })
    },
    queryLastRead () {
      const _this = this
      if (!_this.$simpleStore.state.userInfo) {
        return
      }
      axios({
        url: pageUrl.queryLastRead,
        params: {
          bookId: _this.bookId
        }
      }).then(res => {
        if (res.data.state === 'success' && res.data.obj) {
          _this.noticeBean = res.data.obj
          _this.noticeShow = true
        }
      })
    },
    tocontentByNotice () {
      if (this.noticeBean) {
        var item = this.noticeBean
        var to = '/bookcontent/' + item.id + '/' + this.bookName + '/' + item.title
        this.$router.push(to).catch(() => {})
      }
    },
    toBookContent (item) {
      var to = '/bookcontent/' + item.id + '/' + this.bookName + '/' + item.title
      this.$router.push(to).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
